<template>
  <layout title="subsection分段器">
    <layout-content title="基础使用">
      <tn-subsection v-model="basicSubsectionValue" :data="subsectionData"></tn-subsection>
    </layout-content>

     <layout-content title="设置高度">
      <tn-subsection v-model="basicSubsectionValue" :data="subsectionData" height="50"></tn-subsection>
    </layout-content>

    <layout-content title="修改颜色">
      <tn-subsection v-model="basicSubsectionValue" :data="subsectionData" active-color="tn-bg-blue"></tn-subsection>
    </layout-content>

    <layout-content title="设置圆角">
      <tn-subsection v-model="basicSubsectionValue" :data="subsectionData" border-radius="40"></tn-subsection>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnSubsection from '@/tuniao-ui/components/tn-subsection/src/Subsection.vue'
import { SubSectionData } from '@/tuniao-ui/types'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// subsection值
let basicSubsectionValue = ref<number>(0)

// subsectionData
const subsectionData: SubSectionData[] = [
  { name: '全部' },
  { name: '未付款' },
  { name: '待发货', disabled: true },
  { name: '代收货' },
  { name: '待评价' }
]
</script>

<style lang="scss" scoped>
</style>
